<template>
  <div class="report-top" v-if="topData.topNum">
    <el-row class="chart-row">
      <el-col :span="4">
        <div
          class="top-rank"
          :class="{
            'rank-1': topData.topNum === 1,
            'rank-2': topData.topNum === 2,
            'rank-3': topData.topNum === 3,
            'rank-other': topData.topNum >= 4
          }"
        >
          TOP{{ topData.topNum }}
        </div>
        <div class="name-box">标签名：{{ topData.tagName }}</div>
        <div class="value-box" v-if="type === 'diff'">差异指数：{{ topData.value }}</div>
        <div class="value-box" v-if="type === 'sim'">相似指数：{{ topData.value }}</div>
      </el-col>
      <el-col :span="10">
        <div class="chart-box" ref="sourceChart"></div>
      </el-col>
      <el-col :span="10">
        <div class="chart-box" ref="contrastChart"></div>
      </el-col>
    </el-row>
    <div class="report-text" v-if="type === 'diff'">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;基于模型差异性分析结果可知：<span class="text-name">{{
        topData.sourcePortraitName
      }}</span
      >和<span class="text-name">{{ topData.contrastPortraitName }}</span
      >的标签项<span class="text-tag">{{ topData.tagName }}</span
      >之间的P值为<span class="text-value">{{ topData.pValue }}</span
      >, 在α=0.05的水平上<span class="text-value">{{ topData.textDescription1 }}</span
      >，<span class="text-value">{{ topData.textDescription2 }}</span
      >他们之间存在显著性差异的原假设，因此两客群之间的标签项 <span class="text-tag">{{ topData.tagName }}</span
      >之间<span class="text-value">{{ topData.textDescription3 }}</span
      >显著性差异，效应量化分析结果显示，<span class="text-name">{{ topData.sourcePortraitName }}</span
      >和<span class="text-name">{{ topData.contrastPortraitName }}</span
      >之间的差异系数 （PHI*2，越接近1，代表差异性程度越大）为<span class="text-value">{{ topData.value }}</span
      >，其差异性程度为：<span class="text-level">{{ topData.level }}</span
      >，基于云签自带分箱算法对目标标签进行划分区间后，其中差异性程度最大的前5个区间（若不足5个，则输出全部）如下表所示，
      其中CTGI系数用于衡量两个区间之间的差异性，越接近100，代表差异性程度越大：
    </div>
    <div class="report-text" v-if="type === 'sim'">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;基于模型相似性分析结果可知：<span class="text-name">{{
        topData.sourcePortraitName
      }}</span
      >和<span class="text-name">{{ topData.contrastPortraitName }}</span
      >的标签项<span class="text-tag">{{ topData.tagName }}</span
      >之间的P值为<span class="text-value">{{ topData.pValue }}</span
      >, 在α=0.05的水平上<span class="text-value">{{ topData.textDescription1 }}</span
      >，<span class="text-value">{{ topData.textDescription2 }}</span
      >他们之间存在显著性相似的原假设，因此两客群之间的标签项 <span class="text-tag">{{ topData.tagName }}</span
      >之间<span class="text-value">{{ topData.textDescription3 }}</span
      >显著性相似，效应量化分析结果显示，<span class="text-name">{{ topData.sourcePortraitName }}</span
      >和<span class="text-name">{{ topData.contrastPortraitName }}</span
      >之间的相似系数 （1-PHI*2，越接近1，代表相似性程度越大）为<span class="text-value">{{ topData.value }}</span
      >，其相似性程度为：<span class="text-level">{{ topData.level }}</span
      >，基于云签自带分箱算法对目标标签进行划分区间后，其中相似性程度最大的前5个区间（若不足5个，则输出全部）如下表所示，
      其中CTGI系数用于衡量两个区间之间的相似性，越接近0，代表相似性程度越大：
    </div>
    <div class="report-table">
      <tag-table :data="dataList" :columns="columns" :pagination="false"></tag-table>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: {
    topData: {
      type: Object
    },
    type: {
      type: String,
      default: 'diff'
    }
  },
  data() {
    return {
      sourceChartObj: null,
      contrastChartObj: null,
      dataList: [],
      columns: []
    }
  },
  mounted() {
    this.initData()
  },
  watch: {
    topData() {
      this.initData()
    }
  },
  methods: {
    initData() {
      this.setChart('source')
      this.setChart('contrast')
      this.setTable()
    },
    setChart(type) {
      if (!this[`${type}ChartObj`]) {
        this[`${type}ChartObj`] = echarts.init(this.$refs[`${type}Chart`])
      }
      let option = {
        title: {
          show: true,
          text: this.topData[`${type}PortraitName`],
          top: 10
        },
        tooltip: {
          trigger: 'axis',
          formatter: params => {
            return (
              params[0].name +
              '<br/>数值：' +
              params[0].value +
              '<br/>TGI值：' +
              this.topData[`${type}TgiValue`][params[0].dataIndex]
            )
          }
        },
        grid: {
          bottom: 30
        },
        color: ['#0f80ff'],
        xAxis: [
          {
            type: 'category',
            data: this.topData[`${type}NameList`],
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              show: true
            }
          }
        ],
        series: [
          {
            type: 'bar',
            barMaxWidth: '30',
            label: {
              show: true,
              position: 'top',
              formatter: '{c}'
            },
            data: this.topData[`${type}ValueList`]
          }
        ]
      }
      this[`${type}ChartObj`].setOption(option)
    },
    setTable() {
      let col = [
        {
          show: true,
          label: '区间范围/值',
          prop: 'ctgi',
          align: 'center'
        }
      ]
      let data = {
        ctgi: 'CTGI值'
      }
      this.topData.tgiName.forEach((item, index) => {
        col.push({
          show: true,
          label: item,
          prop: item,
          align: 'center'
        })
        data[item] = this.topData.tgiValue[index]
      })
      this.columns = col
      this.dataList = [data]
    }
  }
}
</script>

<style lang="scss">
.tag-customers {
  .customers-content-report {
    .report-top {
      margin-bottom: 30px;
      .chart-row {
        height: 260px;
        margin-bottom: 10px;
        .top-rank {
          width: 56px;
          height: 30px;
          line-height: 30px;
          border: 1px solid #ccc;
          font-size: 16px;
          font-weight: bold;
          text-align: center;
          color: #fff;
          margin: 50px auto 40px;
          &.rank-1 {
            background-color: #ee0d0d;
          }
          &.rank-2 {
            background-color: #e57225;
          }
          &.rank-3 {
            background-color: #e0bd33;
          }
          &.rank-other {
            background-color: #ccc9c7;
            color: #000;
          }
        }
        .name-box {
          font-size: 20px;
          text-align: center;
          font-weight: bold;
          color: #00308c;
          margin-bottom: 40px;
        }
        .value-box {
          font-size: 20px;
          text-align: center;
          font-weight: bold;
          color: #e54c4c;
        }
        .chart-box {
          width: 100%;
          height: 260px;
        }
      }
      .report-text {
        margin: 0 auto 10px;
        width: 90%;
        line-height: 40px;
        span {
          font-weight: bold;
          padding: 8px 14px;
          margin: 0 6px;
        }
        .text-name {
          background-color: rgb(232, 238, 253);
          color: rgb(64, 158, 255);
        }
        .text-tag {
          background-color: rgb(235, 247, 232);
          color: rgb(127, 203, 104);
        }
        .text-level {
          background-color: rgb(254, 244, 236);
          color: rgb(248, 173, 108);
        }
        .text-value {
          color: #e54c4c;
          margin: 0;
          padding: 8px 8px;
        }
      }
      .report-table {
        width: 80%;
        margin: 0 auto;
      }
    }
  }
}
</style>
